<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />

  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/b/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

  <title>CSS Animation Demo</title>
  <meta name="description" content="HTML5 Canvas demo" />
  <meta name="author" content="Roger Xu" />

  <!-- Mobile viewport optimized: h5bp.com/viewport -->
  <meta name="viewport" content="width=device-width,initial-scale=1" />

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

  <link rel="stylesheet" href="../css/style.css" />
  <link rel="stylesheet" href="../script/libs/jquery-ui/themes/base/jquery.ui.all.css" />

  <!-- All JavaScript at the bottom, except this Modernizr build incl. Respond.js
       Respond is a polyfill for min/max-width media queries. Modernizr enables HTML5 elements & feature detects;
       for optimal performance, create your own custom Modernizr build: www.modernizr.com/download/ -->
  <script src="../script/libs/modernizr-2.0.6.min.js"></script>

  <style>
    .hidden {
        display: none;
    }

    .clearfix {
        clear: both;
    }

    nav ul {
        margin: 0;
        padding: 0;
        font-weight: bold;
    }

    #animatedText {
        -webkit-animation-name: slidein;
        -webkit-animation-duration: 3s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;

        -moz-animation: slidein 3s;
        animation: slidein 3s;
    }

    @-webkit-keyframes slidein {
        0% {
            margin-left: 80%;
            color: black;
        }

        100% {
            margin-left: 0%;
            color: red;
        }
    }

    @-moz-keyframes slidein {
        0% {
            margin-left: 100%;
            color: black;
        }

        100% {
            margin-left: 0%;
            color: red;
        }
    }

    @keyframes slidein {
        0% {
            margin-left: 100%;
            color: black;
        }

        100% {
            margin-left: 0%;
            color: red;
        }
    }
  </style>
</head>

<body>
  <header>
    <h1 style="float: left">CSS Animation Demo</h1>
    <div class="clearfix"></div>
  </header>

  <nav id="navigation">
    <ul>
      <li id="version">Unknown jQuery Version</li>
      <li id="ui-version">Unknown jQuery UI Version</li>
    </ul>
  </nav>

  <div id="main" role="main">
    <p>God helps those who help themselves.</p>
    <div id="toolbar"></div>
    <div id="content">
      <span id="animatedText">Hello World!</span>
    </div>
  </div>

  <footer>
    <div>Copyright &copy; 2011. All rights reserved.</div>
  </footer>

  <!-- JavaScript at the bottom for fast page loading -->

  <script src="../script/libs/jquery-1.7.1.js"></script>
  <script>window.jQuery || document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><\/script>')</script>
  <script src="../script/libs/jquery-ui-1.8.16.js"></script>
  <script>window.jQuery.ui || document.write('<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"><\/script>')</script>
  <script src="../script/libs/json2.js"></script>
  <script src="../script/libs/jsrender.js"></script>

  <!-- scripts concatenated and minified via ant build script-->
  <script defer src="../script/plugins.js"></script>
  <!-- end scripts-->

  <script>
  </script>
  <script>
    $(document).ready(function() {
        // version
        var version = $.fn.jquery;
        $('#version').html('jQuery: ' + version);
        var uiVersion = $.ui.version;
        $('#ui-version').html('jQuery UI: ' + uiVersion);

        // attach animation events
        var ele = $('#animatedText').get(0);
        ele.addEventListener('animationiteration', function(event) {
            console.debug(event);
        }, false);
    });
  </script>
</body>
</html>